import React, { Component } from 'react'
import { history } from 'umi'
import moment from 'moment'
import './index.less'

import { Row, Col, Icon, Breadcrumb, Affix } from 'antd'
import Author from '@/components/Author'
import Advert from '@/components/Advert'
import Comment from '@/components/Comment'
import Recommend from '@/components/Recommend'

import hljs from 'highlight.js'
import MarkdownIt from 'markdown-it'
import 'highlight.js/styles/atom-one-light.css'
import MarkNav from 'markdown-navbar'
import 'markdown-navbar/dist/navbar.css'

import { getArticleById } from '@/services/home'
const _ = require('lodash')
const mdParser = MarkdownIt({
  html: true,
  linkify: true,
  typographer: true,
  highlight(str, lang) {
    if (lang && hljs.getLanguage(lang)) {
      try {
        return hljs.highlight(lang, str).value
      } catch (__) {}
    }
    return '' // 使用额外的默认转义
  },
})

export default class Detail extends Component {
  state = {
    article: {},
  }
  async componentDidMount() {
    await this.getArticleById(this.props.id)
    document.title = '文章 - ' + this.state.article.title
  }

  componentDidUpdate(props) {
    const nowPath = history?.location?.pathname
    if (nowPath && props.id != nowPath.replace(/[^0-9]/gi, '')) {
      this.getArticleById(nowPath.replace(/[^0-9]/gi, ''))
    }
  }
  // 根据文章id获取文章详细信息
  getArticleById = async (id) => {
    const res = await getArticleById(id)
    if (res?.data?.length > 0) {
      this.setState({ article: res.data[0] })
    } else {
      history.push('/404')
    }
  }

  render() {
    const { article } = this.state
    return (
      <div>
        <Row className="comm-main" type="flex" justify="center">
          <Col className="comm-left" xs={24} sm={24} md={16} lg={18} xl={14}>
            <div>
              {/* 面包屑导航 */}
              <div className="bread-div">
                <Breadcrumb>
                  <Breadcrumb.Item>
                    <a href="/">首页</a>
                  </Breadcrumb.Item>
                  <Breadcrumb.Item>文章列表</Breadcrumb.Item>
                  <Breadcrumb.Item>{article.title}</Breadcrumb.Item>
                </Breadcrumb>
              </div>
              {/* 文章内容 */}
              <div>
                <div className="detailed-title">{article.title}</div>
                <div className="list-icon center">
                  <span style={{ color: 'skyblue' }}>
                    <Icon type="calendar" />
                    &nbsp;{moment(Number(article.addTime * 1000)).format('YYYY-MM-DD HH:mm:ss')}
                  </span>
                  <span style={{ color: 'tomato' }}>
                    <Icon type={article.tagIcon || 'folder'} />
                    &nbsp;{article.tagName}
                  </span>
                  <span style={{ color: 'orange' }}>
                    <Icon type="fire" theme="filled" />
                    &nbsp;{article.viewCount}
                  </span>
                </div>
                <div
                  className="article-content"
                  dangerouslySetInnerHTML={{ __html: mdParser.render(article.content || '') }}
                />
              </div>
              {/* 评论区域 */}
              <Comment />
            </div>
          </Col>
          <Col className="comm-right" xs={0} sm={0} md={7} lg={5} xl={4}>
            <Author />
            <Advert />
            <Affix offsetTop={50} style={{ margin: '.5rem 0 1rem .5rem' }}>
              <Recommend />
            </Affix>
          </Col>
        </Row>
      </div>
    )
  }
}
